<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body class="layui-layout-body">
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

    <div class="layui-form-item">
        <label class="layui-form-label" >用戶名</label>
        <div class="layui-input-inline">
            <input type="text" placeholder="请输入用户名" name="username" class="layui-input" id="name">
        </div>
        <span id="na" style="color: red"></span>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password"   placeholder="请输入密码" name="password" class="layui-input" id="pass">
        </div>
    </div>
    <button id="ok">注册</button>

<script src="layui/layui.all.js"></script>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
//    输入框
    var $id = $("#name");
//    显示面板
    var $na = $("#na");
    $id.keyup(function () {
        var username = $id[0].value;
        $.ajax({
            "url":"/check" ,
            "type":"post",
            "data":"username="+username+"",
            "success":function (data) {
                if(data=="yes"){
                    $na[0].innerText="用户名已存在";
                    $id[0].value="";
                }else{
                    $na[0].innerText="";
                }
                }
            }
        );
    });

    var $pass = $("#pass");//密码框
        var $ok = $("#ok");//确认
        $ok.click(function () {
            var username = $id[0].value;
            var password = $pass[0].value;
            $.ajax({
                "url": "/indata",
                "type": "get",
                "data": "username=" + username + "&password=" + password + "",
                "success":function () {
                    alert("注册成功");
                },
                "error":function () {
                    alert("失败");
                }
            });
        });

</script>

</body>
</html>
